<template>
  <div>
    <div class="skeleton" :style="{ padding }" v-if="loading">
      <div
        class="skeleton__avatar"
        :class="{
          'skeleton__avatar--round': avatarShape === 'round',
          'skeleton--animate': animate,
        }"
        :style="{ width: `${avatarSize}rpx`, height: ` ${avatarSize}rpx` }"
        v-if="avatar"
      ></div>
      <div class="skeleton__content">
        <div
          class="skeleton__title"
          :class="{ 'skeleton--animate': animate }"
          :style="{ width: `${titleWidth}` }"
          v-if="title"
        ></div>
        <div
          class="skeleton__row"
          :class="{ 'skeleton--animate': animate }"
          v-for="item in row"
          :key="item"
        ></div>
      </div>
    </div>
    <div class="skeleton__section" v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'skeleton',
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    avatar: {
      type: Boolean,
      default: false,
    },
    avatarSize: {
      type: [Number, String],
      default: 64,
    },
    avatarShape: {
      type: String,
      default: 'round',
    },
    title: {
      type: Boolean,
      default: false,
    },
    titleWidth: {
      type: String,
      default: '40%',
    },
    animate: {
      type: Boolean,
      default: true,
    },
    row: {
      type: Number,
      default: 3,
    },
    padding: {
      type: String,
      default: '40rpx',
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="less">
@skeleton-color: #f2f3f5;
@skeleton-to-color: shade(@skeleton-color, 5%);

.skeleton {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  &__avatar {
    flex-shrink: 0;
    margin-right: 32rpx;
    background: @skeleton-color;
    &--round {
      border-radius: 100%;
    }
  }
  &__content {
    padding-top: 8rpx;
    flex: 1;
  }
  &__title,
  &__row {
    height: 32rpx;
    background: #f2f3f5;
  }
  &__row {
    &:not(:first-child) {
      margin-top: 24rpx;
    }
    // &:last-child {
    //   width: 60%;
    // }
  }
  &__title + &__row {
    margin-top: 40rpx;
  }
  &--animate {
    background: linear-gradient(
      90deg,
      @skeleton-color 25%,
      @skeleton-to-color 37%,
      @skeleton-color 63%
    );
    background-size: 400% 100%;
    animation: skeleton-animate 1.4s ease infinite;
  }
  &__section {
    animation: skeleton-show 0.5s ease;
  }
}
@keyframes skeleton-animate {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes skeleton-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
